<%@ include file="include.jsp"%>
<script type="text/javascript" src="<c:url value='/js/tinymce/tiny_mce.js' />">
</script>
<script type="text/javascript">
tinyMCE.init({

		//script_url: 'http://tinymce.moxiecode.com/js/tinymce/jscripts/tiny_mce/tiny_mce.js'
		
        // General options
        mode : "textareas",
        theme : "advanced",
        plugins : "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

        // Theme options
        theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
        theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
        theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
        theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true,

        // Skin options
        skin : "o2k7",
        skin_variant : "silver",

        // Example content CSS (should be your site CSS)
        //content_css : "css/example.css",

        // Drop lists for link/image/media/template dialogs
        template_external_list_url : "js/template_list.js",
        external_link_list_url : "js/link_list.js",
        external_image_list_url : "js/image_list.js",
        media_external_list_url : "js/media_list.js",

        // Replace values for the template plugin
        template_replace_values : {
                username : "Some User",
                staffid : "991234"
        }
});
</script>

<body>
	<h1>Create Article</h1>
	<form:form id="save_article" action="/article/save_article" method="post"
		modelAttribute="article">
		<form:hidden path="id" />
		<table>
			<tr>
				<td><form:label id="titleLabel" path="title">Title : </form:label></td>
				<td><form:input id="title" path="title" /></td>
			</tr>
			<tr>
				<td><form:label id="pageLabel" path="page">Page : </form:label></td>
				<td><form:select path="page">
						<form:option value="-" label="--Please Select" />
						<form:options items="${pages}" itemValue="id" itemLabel="title" />
					</form:select></td>
			</tr>
			<tr>
				<td><form:label id="createByLabel" path="createBy">Create By : </form:label></td>
				<td><input id="createBy" name="createBy" value="${article.createBy.firstName } ${article.createBy.lastName }"/></td>
			</tr>
			<tr>
				<td><form:label id="createAtLabel" path="createAt">Create At : </form:label></td>
				<td><input id="createAt" name="createAt" value="${article.createAt }"/></td>
			</tr>
			
			<tr>
				<td><form:label id="textLabel" path="text">Text : </form:label></td>
				<td>
				<!--<form:textarea id="text" path="text"
						style="width: 958px; height: 291px;" />-->
					<textarea name="text" style="width:100%">${article.text }</textarea>		
				</td>
			</tr>
		</table>
		<p id="error"></p>
		<input type="button" value="Save" onclick="checkValuesBeforeSubmit()" />
		<input type="reset" value="Cancel" />
	</form:form>
</body>

<script type="text/javascript">
	function checkValuesBeforeSubmit() {
		var isOk = true;
		if (isOk) {
			document.forms["save_article"].submit();
		} else {
			document.getElementById("error").innerHTML = "You must fill in all this attributes with (*)";
		}
	}
</script>
</html>